<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>班级成员</text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="page-content">
				<view class="search">
					<!-- <image style="width: 28rpx;height: 28rpx; margin-right: 12rpx;" src="@/static/talkImage/search.png"
						mode=""></image>
					搜索群成员 -->
					<uni-search-bar placeholder="搜索群成员" @confirm="search" cancel-button="none"
						style="width:100%;min-width:100%;box-sizing:border-box;">
						<template v-slot:searchIcon>
							<image style="width:28rpx;height:28rpx" src="@/static/talkImage/search.png" />
						</template>
					</uni-search-bar>
				</view>
				<view class="ite" v-for="item in peopleListCopy" :key="item.userID">
					<view class="ite-left">
						<image style="width: 80rpx;height: 80rpx;margin-right: 24rpx;border-radius: 60rpx;"
							:src="item.avatar" mode="">
						</image>
						{{item.nick}}
					</view>
				</view>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>
<script>
	import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import uniIcons from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'

	export default {

		data() {
			return {
				groupId: "",
				peopleList: [],
				peopleListCopy: [],
			}
		},
		components: {
			uniSearchBar,
			uniIcons
		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.groupId = decodeURIComponent(options.groupId)
			this.getPeopleList()
		},
		onShow() {

		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			search(res) {
				if (!res.value) {
					this.peopleListCopy = this.peopleList // 如果搜索为空，返回原数组
				} else {
					this.peopleListCopy = this.peopleList.filter(item => item.nick.includes(res.value))
				}

			},
			// 群成员
			getPeopleList() {
				let promise = uni.$chat.getGroupMemberList({
					groupID: this.groupId,
				});
				promise.then((imResponse) => {
					this.peopleList = imResponse.data.memberList;
					this.peopleListCopy = imResponse.data.memberList;
				}).catch((imError) => {
					console.warn('获取失败:', imError);
				});
			},

		},

		onReady() {},

		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.uni-input-input,
	.uni-input-placeholder {
		font-size: 28rpx;
		color: #CCCCCC;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto;

	}

	.page-content {}

	.search {
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		background-color: #F5F6F7;
		color: #CCCCCC;
	}

	.ite {
		margin: 36rpx 24rpx 0;

		.ite-left {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
		}
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.talk_flex_1 {
		padding: 24rpx;
	}
</style>